<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="//cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
  <script type="text/javascript"
          src="//cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
  <script type="text/javascript">

    let websocket = null;
    let stompClient;
    // if ('WebSocket' in window) {
    //   websocket = new WebSocket("http://localhost:8083/push/ws/stomp");//建立连接https://sit-cn.hero-ee.com:8002/ws/push/ws/stomp
    // } else {
    //http://localhost:8083/push/sockjs/stomp
    //https://sit-cn.hero-ee.com:8002/ws/push/sockjs/stomp
    //https://172.24.73.22:8002/ws/push/sockjs/stomp
    //http://172.24.73.23:9200/push/sockjs/stomp
    //http://172.24.73.24:9220/push/sockjs/stomp
    websocket = new SockJS("https://prod-cn.hero-ee.com/ws/push/sockjs/stomp");//建立连接
    // }

    stompClient = Stomp.over(websocket);

    stompClient.heartbeat.outgoing = 20000;
    // client will send heartbeats every 20000ms
    stompClient.heartbeat.incoming = 60000;
    // client does not want to receive heartbeats

    // 添加调试信息（可选）
    stompClient.debug = (msg) => console.log(new Date() + ' [STOMP] ' + msg);

    const headers = {
      login: 'userId2',
      passcode: 'password2',
      authorization: "Bearer E1mM/ZWo8oXl1rR8lGz8umLVa6QjMI7oYLg/telqUffBx/l3U/giGU+7GXU24edhE76/TcCJdJGf+sogrUSJAg==",
      mqConsumerGroup: "group_feishu_sync_pre"
    }
    stompClient.connect(headers, function (frame) {
      console.log("frame:", frame)
      const subscriptionId = stompClient.subscribe('topic_feishu_record_event', function (message) {
          console.log("subscribe have ", message)
          document.getElementById("console").innerHTML = document.getElementById("console").innerHTML + message.body.length + "<br/>";
          message.ack();
        },
        {ack: 'client'});
      // const subscriptionId = stompClient.subscribe('aMessage', function (message) {
      //   console.log("subscribe have ", message)
      //   document.getElementById("console").innerHTML = document.getElementById("console").innerHTML + message.body.length + "<br/>";
      // });
      console.log("subscribeId:", subscriptionId)
    });

    // //建立连接处理
    // websocket.onopen = onOpen;
    // //错误处理
    // websocket.onerror = onError;
    // //断开连接处理
    // websocket.onclose = onClose;
    //
    // function onOpen(openEvent) {
    //   document.getElementById("console").innerHTML = document.getElementById("console").innerHTML + "OPEN<br/>";
    // }
    //
    //
    // function onError(e) {
    //   console.log("[STOMP]" + e);
    // }
    //
    // function onClose() {
    //   document.getElementById("console").innerHTML = document.getElementById("console").innerHTML + "CLOSE<br/>";
    // }

    function doSend() {
      if (websocket.readyState === SockJS.OPEN) {
        var msg = document.getElementById("message").value;
        //发送消息
        stompClient.send("aMessage", {}, msg);
      } else {
        alert("连接失败!");
      }
    }

    function disconnect() {
      if (websocket != null) {
        websocket.close();
        websocket = null;
      }
    }

  </script>
</head>
<body>
<div>
  <button id="disconnect" onclick="disconnect()">断开连接</button>
  <button id="send" onclick="doSend()">发送消息</button>
</div>
<div>
  <textarea id="message" style="width: 350px">Here is a message!</textarea>
</div>
<div>日志信息：</div>
<p id="console" width="600px"></p>
</body>
</html>
